<template>
  <div>
    <user-list
      :list="showList"
      @search="search"
      @modifyInfoClick="modifyInfoClick"
      @deleteUserClick="deleteUserClick"
      @modifyEmailClick="modifyEmailClick"
    />
    <pages
      :total-pages="totalPages"
      @pageChange="pageChange"
    />
    <dialog-email
      ref="email"
      @sureEmailClick="sureEmailClick"
    />
    <dialog-password
      ref="password"
      @surePasswordClick="surePasswordClick"
    />
  </div>
</template>

<script>
// api
import {
  getUserInfoList,
  updataUserEmail,
  deleteUser,
  updataUserPassword
} from '@/api/userList'
// 子组件
import userList from './ChildCpm/userList'
import Pages from './ChildCpm/pages'
import DialogEmail from './ChildCpm/dialogEmail'
import DialogPassword from './ChildCpm/dialogPassword'
export default {
  components: {
    userList,
    Pages,
    DialogEmail,
    DialogPassword
  },
  data() {
    return {
      everyPageShowItemNumber: 12, // 每页 10 条数据
      allUserList: [], // 所有用户的信息
      totalPages: 0, // 总页数
      activePage: 1, // 当前页码
      searchList: [], // 筛选后的数据
      activeClickUserId: null
    }
  },
  computed: {
    showList() { // 展示的数据（最多只有20条）
      return this.searchList.slice(
        (this.activePage - 1) * this.everyPageShowItemNumber, // 开始位置
        (this.activePage - 1) * this.everyPageShowItemNumber + this.everyPageShowItemNumber // 结束位置
      )
    }
  },
  created() {
    this.getuserList() // 初始化所有列表
  },
  methods: {
    // 过滤器
    search(val) {
      this.searchList = this.allUserList.filter(data => {
        if (val === '' ||
            data.name.includes(val) ||
            data.email.includes(val) ||
            data.ID === parseInt(val)
        ) return true
        return false
      })
      // 过滤完以后更新 下面的 条数
      this.totalPages = Math.ceil(this.searchList.length / this.everyPageShowItemNumber) * 10
    },

    // 点击了修改邮箱
    modifyEmailClick(item) {
      this.activeClickUserId = item.ID
      // 弹出对话框
      this.$refs.email.dialogFormVisible = true
    },
    // 确认邮箱后
    sureEmailClick(email) {
      updataUserEmail(this.activeClickUserId, email).then(res => {
        this.getuserList()
      })
    },

    // 点击了修改用户密码
    modifyInfoClick(item) {
      this.activeClickUserId = item.ID
      this.$refs.password.dialogFormVisible = true
    },
    // 更新用户密码
    surePasswordClick(password) {
      updataUserPassword(this.activeClickUserId, password).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },

    // 点击了删除用户
    deleteUserClick(item) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(item.ID).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        this.getuserList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 更新页码
    pageChange(page) {
      this.activePage = page
    },

    // 获取所有用户
    getuserList() {
      getUserInfoList().then(res => {
        this.totalPages = Math.ceil(res.length / this.everyPageShowItemNumber) * 10
        this.allUserList = res
        this.search('') // 在用户初始化之后，就是在 allUserList 初始化之后，在进行一个过滤
      }).catch(err => {
        this.$message({
          type: 'warning',
          message: err
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
